import React, { Component } from 'react'
import styles from './register.module.scss'
import axios from 'axios'
import { Toast } from 'antd-mobile'
export default class UserPass extends Component {
  state = {
    user: "",
    pass: "",
    code: "",
  }

  //返回上一步
  goToPrev = (params) => {
    this.props.history.go(-1)
  }
  //账户
  userChange = (e) => {
    this.setState({
      user: e.target.value
    })
  }
  //密码
  passChange = (e) => {
    this.setState({
      pass: e.target.value
    })
  }
  //验证码
  codeChange = (e) => {
    this.setState({
      code: e.target.value
    })
  }

  //删除账号内容
  deleteUserVal = () => {
    this.setState({
      user: ""
    })
  }
  //删除密码内容
  deletePassVal = () => {
    this.setState({
      pass: ""
    })
  }
  //删除验证码 
  deleteCodeVal = (params) => {
    this.setState({
      code: ""
    })
  }
  //发送验证码
  getCode = (params) => {
    axios
      .get("http://s.linweiqin.com/api/s/getMobileCode", {
        params: {
          mobile: this.state.user,
        },
      })
      .then((res) => {
        console.log(res);
      });
  }
  //注册
  goToRegister = (params) => {
    let { user, pass, code } = this.state
    if (user === "" || pass === "" || code === "") {
      Toast.info("请认真填写信息", 1)
    } else {
      axios.post("http://s.linweiqin.com/api/s/createUser", {
        mobile: this.state.user,
        username: this.state.user,
        password: this.state.pass,
        code: this.state.code,
      }).then(res => {
        if (res.data.msg === "新增成功") {
          Toast.info("注册成功", 1, () => {
            this.props.history.push('/userpass')
          })
        }else{
          Toast.info("你在扯卵蛋", 1, () => {
            this.props.history.push('/userpass')
          })
        }
      }).catch(err => {
        Toast.info("出错啦", 1)
      })
    }

  }

  render() {
    let { user, pass, code } = this.state

    return (
      <div className={styles.mgUserPass}>
        <div className={styles.mgUserPassNav}>
          <div className={styles.NavLeft}>
            <i onClick={this.goToPrev} className='iconfont icon-icon'></i>
          </div>
          <div className={styles.NavCenter}>
            账号注册
           </div>
          <div className={styles.NavRight}></div>
        </div>
        <div className={styles.mgUserPassMain}>
          <div className={styles.MainAccount}>
            <input type="text"
              value={user}
              onChange={this.userChange}
              placeholder='手机号' />
            {
              user === "" ? "" : <i id={styles.deleBtn1} onClick={this.deleteUserVal} className='iconfont icon-cha'></i>
            }
          </div>
          <div className={styles.MainPassword}>

            <input type="password"
              value={pass}
              onChange={this.passChange}
              placeholder='密码' />
            {
              pass === "" ? "" : <i id={styles.deleBtn2} onClick={this.deletePassVal} className='iconfont icon-cha'></i>
            }
          </div>
          <div className={styles.verificationCode}>
            <input
              value={code}
              onChange={this.codeChange}
              type="text" />
            {
              code === "" ? "" : <i id={styles.deleBtn3} onClick={this.deleteCodeVal} className='iconfont icon-cha'></i>
            }
            <div onClick={this.getCode} className={styles.sendVerificationCode}>发送验证码</div>
          </div>
          <div onClick={this.goToRegister} className={styles.MainLogin}>
            注册
            </div>
        </div>
      </div>
    )
  }
}
